<template>
  <div class="login_container_box">
    <el-form ref="form"
             class="login_container"
             :model="login"
             status-icon
             :rules="rules">
      <!-- h3要放在里面:只能有一个根,且title也是表单的一部分 -->
      <h3 class="login_title">{{title}}管理系统</h3>
      <!-- prop对应rules里的键 -->
      <el-form-item label=""
                    prop="username">
        <el-input v-model="login.username"
        prefix-icon="el-icon-user"
                  autocomplete="off"
                  placeholder="请输入用户名"></el-input>
      </el-form-item>

      <el-form-item label=""
                    prop="password">
        <el-input type="password"
        prefix-icon="el-icon-lock"
                  v-model="login.password"
                  placeholder="请输入密码"
                  autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="submit"
                   type="primary"
                   style="width: 100%;background-image: linear-gradient(to right, #30cfd0, #330867);border: none">登 录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Cookie from 'js-cookie'
import { getMenu } from '../api/index'
export default {
  data() {
    return {
        title:process.env.VUE_APP_TITLE,
      // 登陆数据
      login: {
        username: 'admin',
        password: 'admin',
      },
      // 校验规则
      rules: {
        username: [
          { required: 'true', message: '请输入用户名', trigger: 'blur' },
        ],
        password: [
          { required: 'true', message: '请输入用户名', trigger: 'blur' },
        ],
      },
    }
  },
  methods: {
    submit() {
      // 表单的校验
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 传入表单数据
          getMenu(this.login).then((data) => {
            // console.log(data);
            if (data.data.code === 200) {
              // 记录cookie
              Cookie.set('token', data.data.data.token)
              // 设置菜单
              this.$store.commit('setMenu', data.data.data.menu)
              // 动态添加路由
              this.$store.commit('addMenu', this.$router)
              // 跳转到首页
              this.$router.push('/home')
            } else {
              // 验证失败的弹窗
              this.$message.error(data.data.data.message)
            }
          })
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.login_container_box {
  display: flex;
  justify-content: center;
  align-items: center;
  // padding-top: 180px;
  height: 100%;
  background: url('../assets/images/login_bg.jpg') no-repeat;
  background-size: 100% 100%;
}
.login_container {
  width: 350px;
  padding: 35px 35px 15px 35px;
  // 让padding在width里面
  box-sizing: border-box;
  border-radius: 15px;
  background: rgba(0, 0, 0, 0.6); /*rgba设置透明层*/
  background-color: #00000060; /*八位颜色位设置透明层*/

  .login_title {
    color: #ffffff;
    // 左右居中
    text-align: center;
    margin-bottom: 40px;
  }
  .el-input {
    width: 100%;
  }
}
</style>